<template>
	<div class="s_Fans">
		<ul class="clear" v-loading="loading">
			<template   v-for="(item ,index) of fansList">
				<li class="i_teacherLs fl" :key="index">
					<div class="i_teacherLs_b">
						<router-link to="###">
							<img :src="BASE_URL+item.avatar_path">
						</router-link>
						<h3>{{item.name}}</h3>
						<div v-if="item.sub_name != '暂未绑定科目' ">{{item.sub_name}}</div>
						<p v-if="0">- 暂无绑定科目 - </p>
					</div>
					<div class="i_teacherLs_t i_transition">
						<h3>{{item.name}}</h3>
						<div v-if="item.sub_name != '暂未绑定科目' ">{{item.sub_name}}</div>
						<div v-else></div>
						<p v-if="0">- 暂无绑定科目 -</p>
						<div class="i_brief">{{item.autograph}}</div>
						<div class="i_teacherLs_m">
							<i class="ipng but_maino1_slide" @click="space(item.id)"></i>

							<template >
								<i class="ipng but_Collection02_slide"  v-if="item.is_relation === 0" @click="getFollow(item.id ,'add')"></i>
								<i class="ipng but_Collection02_down" v-else @click="getFollow(item.id, 'del')"></i>
							</template>
						<!-- 	<template v-else>
								<i class="ipng but_Collection02_slide" v-if="item.is_relation === 0"></i>
								<i class="ipng but_Collection02_down" v-else></i>
							</template> -->

							<i class="ipng but_chat02_slide" @click="parent(item)"></i>
						</div>
					</div>
				</li>
			</template>
			
		</ul>
		<el-pagination v-if="parseInt(total_number) > listFansParam.size "
	      @current-change="changePage"
	      :current-page="listFansParam.page"
	      :page-size="listFansParam.size"
	      layout="prev, pager, next"
	      :total="total_number">
	    </el-pagination>
	    <div class="dependent" v-if="placeholder">
	    	<i class="ipng image_state01"></i>
	    	<p>
	    		还没发现任何相关的内容哦~
	    	</p>
	    </div>

	    <!-- <chat  ref="child"></chat> -->
	</div>
</template>
<script>

	// import chat from '@/components/common/chat';
	export default {
		// components: {chat},
		data() {
			return {
				listFansParam:{
					type:0,
					user_id: this.$route.query.id,
					size:12,
					page:1,
					data_type:2,
				},
				total_number:0,
				fansList:[],
				placeholder: false,
				loading: true,
				is_newlogin:  is_empty(this.$store.state.userInfo) ? false : true,
			}
		},
		created(){
	       this.getFansList();
		},
		methods: {
			parent(obj){
				if (!this.is_newlogin) {
					this.$message.warning('请登录~')
					return
				}
				if ( obj.userid === this.$g.user_id) {
					this.$message.warning('不能跟自己聊天~')
					return
				} 
				for (var i = 0; i < this.$parent.$children.length; i++) {
					if (this.$parent.$children[i].$el.className === 'chat-emoji') {
						this.$parent.$children[i].getUserChatOne(obj)
						break
					}
					
				}
			},
			space(id){
				this.$router.push({path: '/space/video',query: {id: id}})
				this.$store.commit('SET_NCHANGEDATA', new Date())
				// this.$router.go(0)
			},
			//分页改变
            changePage(val) {
            	this.listFansParam.page = val;
    			this.getFansList();
            },

            getFansList(){
				console.log(111111,'444')
            	let success = ( data=>{
            		this.fansList = data.data.data;
            		this.total_number = data.data.data_sum;
            		
            		this.loading = false
            		this.fansList.length === 0 ? this.placeholder = true : this.placeholder = false
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/user/relation',{params: this.listFansParam,func:{success:success}})
            },
            getFollow(id, type){
            	let success = ( res =>{
            		this.$message.success(res.msg);
            		this.$emit('setFollow','fans')
            		this.getFansList()
            	});

            	let state = ''
            	if (type == 'add') {
            		state = 'add'
            	}else{
            		state = 'del'
            	}

            	this.$ajax({
            		url: 'api/user/bind_relation',
            		method: 'post',
            		data: {
            			// user_id: this.listFansParam.user_id,
            			follow_id: id,
            			add_delete: state,
            			type: 0
            		},
            		func: {
            			success: success
            		}
            	})
            }
           
		}
	}
</script>